<template>
  <view class="container">
    <view class="header">
      <text class="title">门店评论数据</text>
    </view>

    <view class="filters">
      <uni-data-select v-model="value" :localdata="range" @change="change" />
      <uni-datetime-picker v-model="datetimerange" @change="maskClick" type="date" />
    </view>

    <view class="section">
      <text class="section-title">月：好评率分布</text>
      <qiun-data-charts type="column" :opts="surplusOpts" :chartData="chartData" />
    </view>
	


    <view class="section">
      <text class="section-title">月：门店好评数据表</text>
      <scroll-view scroll-x="true" class="table-container">
        <view class="table">
          <view class="table-header">
            <view v-for="(item, index) in fun_list" :key="index" class="table-cell">{{item.title}}</view>
          </view>
          <view v-for="(items, indexs) in data_list" :key="indexs" class="table-row">
            <view v-for="(item, index) in items" :key="index" class="table-cell">
              <text v-if="item.type=='1'">{{item.title}}</text>
              <view v-if="item.type=='2'" class="progress-bar" :style="{width: item.content+'%', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
                {{item.content.toFixed(2)}}%
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="section">
      <text class="section-title">日：好评分布</text>
      <qiun-data-charts type="column" :opts="opts_day" :chartData="chartData_day" />
    </view>

    <view class="section">
      <text class="section-title">日：门店好评数据表</text>
      <scroll-view scroll-x="true" class="table-container">
        <view class="table">
          <view class="table-header">
            <view v-for="(item, index) in fun_list" :key="index" class="table-cell">{{item.title}}</view>
          </view>
          <view v-for="(items, indexs) in data_list_day" :key="indexs" class="table-row">
            <view v-for="(item, index) in items" :key="index" class="table-cell">
              <text v-if="item.type=='1'">{{item.title}}</text>
              <view v-if="item.type=='2'" class="progress-bar" :style="{width: item.content+'%', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
                {{item.content.toFixed(2)}}%
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="section">
      <text class="section-title">门店实时差评表</text>
      <zb-table :show-header="true" :columns="column" :stripe="true" :fit="false"
        @rowClick="rowClick" @toggleRowSelection="toggleRowSelection"
        @toggleAllSelection="toggleAllSelection" :border="true" :data="data"></zb-table>
    </view>

    <view class="section">
      <text class="section-title">月：5分好评渠道分布</text>
      <qiun-data-charts type="pie" :opts="opts" :chartData="chartData_qd" />
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				data_list_day:[],
				chartData_day: {
					categories: ["携程", "去哪", "美团", "智行", "抖音", "同程"],
					series: [{
							name: "有效订单数",
							textColor: "#FFFFFF",
							data: [35, 36, 31, 33, 13, 34]
						},
						{
							name: "5分好评数",
							textColor: "#FFFFFF",
							data: [18, 27, 21, 24, 6, 28]
						},
						{
							name: "5-3分差评数",
							textColor: "#FFFFFF",
							data: [35, 36, 31, 33, 13, 34]
						},
						{
							name: "3分差评数",
							textColor: "#FFFFFF",
							data: [18, 27, 21, 24, 6, 28]
						}
					]
				},
				opts_day: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						fontColor:"rgba(255,255,255,1)"
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "stack",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						}
					}
				},
				datetimerange: '2024-10-01 20:34:31',
				value: 0,
				range: [{
						value: 0,
						text: "集团数据"
					},
					{
						value: 1,
						text: "话题酒店（昆明机场店）"
					},
					{
						value: 2,
						text: "话题民宿（昆明机场店）"
					}, {
						value: 3,
						text: '话题酒店（江岸店)'
					},
				],
				chartData_qd: {
					series: [{
						data: [{
							"name": "携程",
							"value": 50,
							"labelText": "携程:50人"
						}, {
							"name": "美团",
							"value": 30,
							"labelText": "美团:30人"
						}, {
							"name": "抖音",
							"value": 20,
							"labelText": "抖音:20人"
						}, {
							"name": "去哪",
							"value": 18,
							"labelText": "去哪:18人"
						}, {
							"name": "会员",
							"value": 8,
							"labelText": "会员:8人"
						}]
					}]
				},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					ringWidth: 150,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "房晚数",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "88",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},

					}
				},
				column: [{
						name: 'id',
						label: 'id',
						fixed: false,
						width: 80,
						emptyString: '--'
					},

					{
						name: 'username',
						label: '员工名称',

						align: 'right',
					}, {
						name: 'sex',
						label: '性别'
					}, {
						name: 'age',
						label: '年龄'
					},
					{
						name: 'phone',
						label: '联系电话',
					},
					{
						name: 'operation',
						type: 'operation',
						label: '员工数据',
						renders: [{
							name: '查看',
							func: 'agree', // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							type: "primary"
						}, {
							name: '编辑',
							func: 'bj',
							type: 'primary'
						}, {
							name: '删除',
							func: 'del', // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							type: "warn"
						}]
					},
				],
				data_cp: [{
						id: '123',
						username: 'grooth',
						phone: '1231231231',
						age: '12',
						sex: '男'
					},
					{
						id: '123',
						username: 'grooth',
						phone: '1231231231',
						age: '12',
						sex: '男'
					},
				],
				jd_color: ["#4B98FE", "#00D05E", "#957BFE", "#FE871B", "#00C8B0",
					"#F674D6"
				],
				backgrounds: ['rgba(89,126,155,1)', 'rgba(84,120,154,1)'],
				fun_list: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: '订单数',
					width: '80px'
				}, {
					title: '5分好评数',
					width: '80px'
				}, {
					title: '5-3分差评数',
					width: '90px'
				}, {
					title: '3分差评数',
					width: '80px'
				}, {
					title: '上线率',
					width: '80px'
				}, {
					title: '转换率',
					width: '80px'
				}],
				data_list: [
					[{
						width: '200px',
						type: '1',
						title: '话题酒店（昆明机场店）',
						content: '话题酒店（昆明机场店）'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '80px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '80px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '90px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '80px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '80px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '80px'
					}]
				],
				column: [{
						name: 'time',
						label: '评论时间',
						fixed: false,
						width: 180,
						emptyString: '--'
					},
					{
						name: 'name',
						label: '门店名称',
						sorter: false,
						width: 100,
						align: 'center',
					},
					{
						name: 'content',
						label: '差评内容',
						width: 500,

					},
					{
						name: 'pt',
						label: '所属平台',
						align: 'center',
					}
				],
				data: [],
				chartData: {
					categories: ["2019", "2020", "2021", "2022", "2023", "2024"],
					series: [{
						name: "好评率",
						data: [52, 34, 44, 12, 4, 13],
						legendShape: "circle",
					}, {
						name: "净好评率",
						data: [-52, -34, -44, -12, -4, -13],
					}]
				},
				surplusOpts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [15, 15, 0, 15],
					dataLabel: true,
					xAxis: {
						disableGrid: true,
						fontColor: "rgba(255,255,255,1)"
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disabled: false,
						disableGrid: true,
						gridType: 'dash',
						dashLength: '4',
						splitNumber: 6,
						data: [{
							axisLineColor: "#FFFFFF",
							min: -60,
							max: 60
						}, ],
					},
					legend: {
						show: true,
						position: "bottom",
						float: "right",
					},
					extra: {
						column: {
							meterBorder: 0,
							barBorderCircle: true,
							barBorderRadius: [16, 16, 16, 16],
							meterFillColor: '#957BFE',
							type: "meter",
							width: 18,
							activeBgColor: "#000000",
							activeBgOpacity: 0.04,
						},
						markLine: {
							data: [{
								value: 0,
								showLabel: true
							}]
						}
					},
				},
			}
		},
		onLoad() {
			var date = new Date()
			this.no_jd = (date.getDate() / new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()).toFixed(
				4) * 100
			var date = new Date()
			this.datetimerange = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + (date.getDate() - 1)).slice(-2)
			var that = this
			// var temp = this.datetimerange.split(' ')[0].split('-')
			// var mon = temp[0] + '-' + temp[1]
			var mon = this.datetimerange
			uni.showLoading({
				title: '正在加载...'
			})
			uni.request({
				// url: 'http://127.0.0.1:3383/get_hp_data',
				url: 'http://43.138.215.11:3384/get_hp_data',
				method: 'POST',
				data: {
					hotel_name: this.value == 0 ? 'all' : this.range[this.value].text,
					time_sjc: this.datetimerange.split(' ')[0]
				},
				success(res) {
					uni.hideLoading()
					that.chartData.categories = res.data.data.categories
					that.chartData.series[0].data = res.data.data.hpl_result
					that.chartData.series[1].data = res.data.data.jhp_result
					that.data_list = res.data.data.result_data
					that.chartData_qd.series[0].data = res.data.data.chart_data
					that.chartData_day.series[0].data = res.data.data.result_day[0]
					that.chartData_day.series[1].data = res.data.data.result_day[1]
					that.chartData_day.series[2].data = res.data.data.result_day[2]
					that.chartData_day.series[3].data = res.data.data.result_day[3]
					that.data_list_day = res.data.data.result_hp_day
					console.log(that.chartData.chartData_day)
				}
			})
		},
		methods: {
			maskClick(){
				this.get_data()
			},
			change(e) {
				console.log(e)
				this.get_data()
			},
			get_data() {
				var that = this
				uni.showLoading({
					title: '正在加载...'
				})
			
				console.log(this.datetimerange.split(' ')[0])
				var mon = this.datetimerange
				// var temp = this.datetimerange.split(' ')[0].split('-')
				// var mon = temp[0] + '-' + temp[1]
				uni.request({
					// url: 'http://127.0.0.1:3383/get_hp_data',
					url: 'http://43.138.215.11:3384/get_hp_data',
					method: 'POST',
					data: {
						hotel_name: this.value == 0 ? 'all' : this.range[this.value].text,
						time_sjc: this.datetimerange.split(' ')[0]
					},
					success(res) {
						uni.hideLoading()
						that.chartData.categories = res.data.data.categories
						that.chartData.series[0].data = res.data.data.hpl_result
						that.chartData.series[1].data = res.data.data.jhp_result
						that.data_list = res.data.data.result_data
						that.chartData_qd.series[0].data = res.data.data.chart_data
						that.chartData_day.series[0].data = res.data.data.result_day[0]
						that.chartData_day.series[1].data = res.data.data.result_day[1]
						that.chartData_day.series[2].data = res.data.data.result_day[2]
						that.chartData_day.series[3].data = res.data.data.result_day[3]
						that.data_list_day = res.data.data.result_hp_day
					}
				})
			},
			startDate() {
				return this.getDate('start');
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			endDate() {
				return this.getDate('end');
			},
		}
	}
</script>

<style>
	
.container {
  background-color: rgba(12, 45, 88, 1);
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.section {
  background-color: rgba(174, 200, 225, 0.1);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20rpx;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 200%;  /* Adjust based on your needs */
}

.table-header, .table-row {
  display: flex;
}

.table-cell {
  flex: 1;
  padding: 10rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-bar {
  height: 30rpx;
  border-radius: 15rpx;
  color: #ffffff;
  text-align: center;
  font-size: 24rpx;
  line-height: 30rpx;
}
</style>
